<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 11;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .login_right{
    position: absolute;
    min-width: 1283px;
    width: calc(100% - 600px);
    height: 100%;
    background: url('../../assets/images/20231213153346.jpg') no-repeat;
    background-size: 100% 100%;
  }
}
.el-input{
  font-size: 19px;
  width: 362px;
  height: 59px;
  background: #F5F8FF;
  border-radius: 30px;
}
.el-button{
  width:100%;
  height: 59px;
  border-radius: 30px;
  font-size: 21px;
  background:linear-gradient(105deg,#4775EA,#443CE6);
}
:deep(.el-input__wrapper){
  border-radius: 30px;
  background-color: #f5f8ff;
}
:deep(.el-input__inner){
  background-color: #f5f8ff;
}
.iconfont{
  font-size: 19px;
}
.login_box{
  position: absolute;
  z-index: 12;
  right: 0;
  width: 600px;
  height: 100%;
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .login_logo{
    width: 214px;
    height: 33.89px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .login_title{
    font-size: 30px;
    font-weight: 500;
    color: #111111;
    margin-top: 12px;
  }
  .login_desc{
    margin-top: 12px;
    font-size: 14px;
    color: #6B7379;
    margin-bottom: 60px;
  }
}

</style>
<template>
  <div class='login'>
    <div class="login_right"></div>
    <div class="login_box">
      <img class="login_logo" src="../../assets/images/20231213153447.png" alt="">
      <div class="login_title">正理生能物流管理系统</div>
      <div class="login_desc">The management system of zhengli shengneng logistics</div>
      <el-form ref="formRef" :model="form" label-width="0px" :rules="rule">
        <el-form-item label="" prop="phone">
          <el-input placeholder="请输入用户名称" v-model="form.phone" maxlength="11">
            <template #prefix>
              <span class="iconfont icon-yonghu"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input placeholder="请输入登录密码" v-model="form.password" type="password" show-password>
            <template #prefix>
              <span class="iconfont icon-mima"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button size="large" type="primary" @click="onSubmit(formRef)">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import {useRouter} from "vue-router";
import {postLoginUserLogin} from '@/api/user'
const message = inject('message')
const formRef = ref()
const router = useRouter()
const form = reactive({
  phone: '',
  password: ''
})

const rule = reactive({
  phone: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" }
  ]
});

const onSubmit = async(formRef) => {
  try {
    await formRef.validate()
    const res = await postLoginUserLogin(form)
    console.log(res)
    console.log(res.data.id)
    useStorage("token", res.data.token);
    useStorage("isShow",res.data.isShow);
    useStorage("userId", res.data.id);
    useStorage("userInfo", res.data);
    message.notify('success','登录成功')
    await router.push('/OutOrder')
  } catch (e) {
    console.log(e)
  }
};
</script>